<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="apply-box flex-row-center w100">
		<view class="cancel-tips w100" v-if="proxyTips">
			<text class="title">申请助教说明：</text>
			<view class="tips-item flex">
				<text class="icon"></text>
				<text class="text">{{proxyTips}}</text>
			</view>
		</view>
		<!-- 提交状态 -->
		<view class="status-box flex" v-if="proxyInfo&&proxyInfo.applyState!=-1">
			<view class="name-box flex-row-center" v-if="proxyInfo.applyState==0">
				<up-icon name="clock" color="#F9AE3D" size="84rpx"></up-icon>
				<text class="name ing">申请正在审核中</text>
				<text class="detail">平台电话: 19326416371</text>
			</view>
			<view class="name-box flex-center" v-else-if="proxyInfo.applyState==1">
				<up-icon name="checkmark-circle" color="#5AC725" size="58rpx"></up-icon>
				<text class="name sucss">申请助教审核通过</text>
				<view class="flex-center w100">
					<up-button :customStyle="{'color':'#186059','height':'84rpx','width':'100%'}" @click="toApply"
						text="前往助教中心" shape="circle"
						color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
				</view>
			</view>
			<template v-else-if="proxyInfo.applyState==2">
				<view class="name-box flex-row-center">
					<up-icon name="close-circle" color="#F56C6C" size="58rpx"></up-icon>
					<text class="name err">审核未通过！</text>
				</view>
				<text class="reason">原因：{{proxyInfo.applyReason}}</text>
			</template>
		</view>
		<!--  -->
		<view class="from w100" v-if="proxyInfo.applyState!=1&&proxyInfo.applyState!=0">
			<view class="avatar-box flex-center">
				<up-upload :deletable="true" width="120rpx" height="120rpx" :fileList="fileList" @afterRead="afterRead"
					@delete="deletePic" name="1" :maxCount="1">
					<view class="ava-upload flex-center">
						<up-icon name="account" color="#dedede" size="68rpx"></up-icon>
					</view>
				</up-upload>
				<text class="avatar-name" @click="deletePic">助教头像</text>
			</view>
			<view class="from-item w100 flex-row-center">
				<text class="name">接单地址</text>
				<up-input border="none" inputAlign="right" disabled placeholderClass="placeholderClass" fontSize="26rpx"
					color="#DEDEDE" placeholder="请输入内容" v-model="proxyInfo.address">
					<template #suffix>
						<up-icon @click="chooseLocationTap" name="map-fill" color="#DEDEDE" size="42rpx"></up-icon>
					</template>
				</up-input>
			</view>
			<!-- 提交 -->
			<view class="submit-box flex-center w100">
				<up-button :customStyle="{'color':'#186059','height':'84rpx','width':'100%'}" @click="submitApply"
					:text="btnText" loadingText="提交中" :loading="proxyInfo.loadingState" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		isValidPhoneNumber,
		validateForm
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	const {
		userInfo
	} = userInfoStore();
	import {
		configInfoStore
	} from '@/stores/config.js';
	const {
		configInfo
	} = configInfoStore();
	const btnText = ref('提交申请')
	const proxyTips = ref(computed(() => configInfo.applyAssistant?.value));
	const fileList = ref([]);
	import areaPickerVue from '@/components/area/areaPicker.vue';
	const proxyInfo = reactive({
		address: '',
		lat: 0,
		lng: 0,
		avatar: '',
		loadingState: false,
		applyState: -1, //0申请中 1申请成功 2申请失败 
		applyReason: '', //申请失败原因
	})
	onLoad(() => {
		getApplyStatus();
	});
	const chooseLocationTap = async () => { //选择地理位置
		uni.showLoading({
			title: '加载中'
		})
		chooseLocation('', '', true).then((res) => {
			uni.hideLoading();
			if (res) {
				proxyInfo.address = res.address + (res.name ? res.name : '');
				proxyInfo.lat = res.latitude;
				proxyInfo.lng = res.longitude;
			}
		}).catch(() => {
			uni.hideLoading();
			uni.$u.toast('获取位置失败');
		})
	}
	const afterRead = async (event) => {
		fileList.value.push({
			...event.file,
			status: 'uploading',
			message: '上传中',
		})
		const result = await $Api.uploadFile.uploadFilePromise(fileList.value[0].url);
		console.log('result', result);
		if (result.code == '1') {
			fileList.value = [{
				status: 'success',
				message: '',
				url: result.data.fullurl,
			}];
		} else {
			fileList.value = [];
			uni.$u.toast(result.msg)
		}
	};
	// 删除图片
	const deletePic = (event) => {
		fileList.value = [];
	};
	const getApplyStatus = async () => { //获取申请状态
		const res = await $Api.assistant.getApplyStatus();
		if (res.code == 1) {
			if (res.data) {
				proxyInfo.applyState = res.data.review_status;
				if (res.data.review_status == 2) {
					btnText.value = '重新提交'
				}
				proxyInfo.applyReason = res.data.reason;
			}
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'error',
				duration: 2000
			});
		}
	}
	const submitApply = async () => { //提交申请
		if (proxyInfo.loadingState) return;
		if (!proxyInfo.address) {
			uni.$u.toast('请选择接单位置信息');
			return
		}
		if (fileList.value.length == 0) {
			uni.$u.toast('请先上传头像');
			return
		}
		proxyInfo.avatar = fileList.value[0].url;
		proxyInfo.loadingState = true;
		const res = await $Api.assistant.apply({
			address: proxyInfo.address,
			latitude: proxyInfo.lat,
			longitude: proxyInfo.lng,
			avatar: proxyInfo.avatar
		});
		if (res.code == 1) {
			uni.showToast({
				title: '提交成功，请等待平台审核',
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
				proxyInfo.loadingState = false;
			}, 1200)
		} else {
			proxyInfo.loadingState = false;
			uni.showToast({
				title: res.msg,
				icon: 'error',
				duration: 2000
			});
		}
		//TODO:提交代理申请

	};
	const toApply = () => { //前往代理
		uni.navigateBack();
		if (userinfo) {
			userInfo.is_assistant = 1;
		}
	}
</script>
<style lang="scss">
	.placeholderClass {
		color: $placeholder-color !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}

	.u-radio-group--row {
		justify-content: flex-end;

		.u-radio {
			margin-left: 16rpx;
		}
	}

	.u-upload__wrap__preview__image {
		border-radius: 50%;
	}

	.placeholderClass {
		color: $placeholder-color !important;
		font-size: 26rpx;
		font-weight: 500;
	}
</style>
<style lang="scss" scoped>
	.apply-box {
		flex-direction: column;
		padding: 24rpx;
	}

	.cancel-tips {
		border-radius: 24rpx;
		border: 2rpx solid rgba(105, 187, 176, 1);
		background-color: #222E30;
		padding: 35rpx;

		.title {
			display: block;
			font-size: 32rpx;
			font-weight: 500;
			color: $name-color;
			margin-bottom: 48rpx;
		}

		.tips-item {
			margin-bottom: 24rpx;

			.icon {
				border-radius: 50%;
				width: 12rpx;
				height: 12rpx;
				display: block;
				margin-right: 12rpx;
				background-color: #7EDE9E;
				flex-shrink: 0;
				margin-top: 14rpx;
			}

			.text {
				font-size: 28rpx;
				color: $description-color;
			}
		}

		.tips {
			font-size: 28rpx;
			display: block;
			color: $description-color;
			margin-top: 48rpx;
		}
	}

	.status-box {
		width: 100%;
		flex-direction: column;
		margin-top: 24rpx;

		.name-box {
			flex-direction: column;
		}

		.name {
			color: #E2E4E4;
			font-size: 30rpx;
			margin: 20rpx 0;
		}

		.detail {
			color: #E2E4E4;
			font-size: 28rpx;
		}

		.err {
			color: #F56C6C;
		}

		.sucss {
			color: #5AC725;
		}

		.ing {
			color: #F9AE3D;
		}

		.reason {
			font-size: 28rpx;
			color: #E2E4E4;
			margin-top: 12rpx;
		}
	}

	.from {
		margin-top: 60rpx;

		.avatar-box {
			flex-direction: column;
			margin-bottom: 32rpx;

			.ava-upload {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 2rpx solid #dedede;

			}

			.avatar-name {
				display: block;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 18rpx;
			}
		}
	}

	.from-item {
		box-sizing: border-box;
		width: 100%;
		justify-content: space-between;

		.name {
			display: block;
			font-weight: 500;
			font-size: 28rpx;
			color: #E2E4E4;
			margin-right: 12rpx;
		}
	}

	.submit-box {
		margin-top: 32rpx;
	}
</style>